<template>
  <div class="common-size horizontal info_basic">
    <page-head :pageHead="pageHeadData"></page-head>
    <div class="horizontal-page-content">
      <div class="horizontal-content half">
        <div class="half-content left">
          <content-head :contentHead="contentHeadData"></content-head>
          <div class="content-container">
            <div class="page-chart page-chart4">
              <div class="chart-box basic-box">
                <div v-for="(item, index) in basic" class="basic-item" :class="index % 2 === 0 ? left : right">
                  <div class="basic-icon" :class="itemClass(index)"></div>
                  <div class="num_unit">{{item.num_unit}}</div>
                  <div class="name">{{item.name}}</div>
                </div>
              </div>
            </div>
            <div class="horizontal-distribute-container text-center">
              <div v-html="item" v-for="(item, index) in textData1"></div>
            </div>
          </div>
        </div>
        <div class="half-content right">
          <content-head :contentHead="contentHeadDataTwo"></content-head>
          <div class="content-container">
            <div class="page-chart page-chart4">
              <div class="y-name">单位:台</div>
              <div class="chart-box" ref="chart2"></div>
              <div class="pie-dist">
                <div class="pie-dist-item left" v-for="(item,index) in chart2Chart">
                  <div class="display-middle pie-dist-radius" :class="radiusClass(index)"></div>
                  <div class="display-middle">{{item.name}}</div>
                </div>
              </div>
            </div>
            <div class="horizontal-distribute-container text-center">
              <div v-html="item" v-for="(item, index) in textData2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <page-footer :pageFooter="pageFooterData"></page-footer>
  </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import contentHead from "./contentHead.vue"
  import {nuxtMixins} from '../../assets/javascript/mixin'
  let echarts = require('echarts')
  export default{
    name: 'info_basic',
    props:['chartData'],
    mixins: [nuxtMixins],
    data () {
      return {
        pageTitle: '<span>信息总览</span><span class="en_title"> Information Overview</span>',
        contentTitle: '基本信息',
        titleDescribe: '',
        contentHeadDataTwo: {
          contentTitle: '价值分布',
          titleDescribe: ''
        },
        left: "left",
        right: "right",
        color: [
          {start: '#5058a5', end: '#9d9dcd'},
          {start: '#356fb7', end: '#8fb6e1'},
          {start: '#5eb63e', end: '#add593'},
          {start: '#cdda41', end: '#d2e178'},
          {start: '#f19b5b', end: '#f4b96e'},
          {start: '#5058a5', end: '#9d9dcd'}
        ],
        chart2Chart: []
      }
    },
    methods: {
      itemClass (index) {
        return 'icon-' + (index + 1)
      },
      radiusClass (index) {
        return 'radius-' + index
      },
      ageLimitChart () {
        if (!this.chartData) {
          return false
        }
        if (!this.chartData.chartData) {
          return false
        }
        if (!this.chartData.chartData.chart1 && !this.chartData.chartData.chart2) {
          return false
        }
        if (!this.chartData.chartData.chart1.chart && !this.chartData.chartData.chart2.chart) {
          return false
        }
        const  chart1 = this.chartData.chartData.chart1
        const  chart2 = this.chartData.chartData.chart2
        const option = {
          backgroundColor: '#fff',
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            top: 40,
            containLabel: true
          },
          series: [
            {
              name: '价值分布',
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '45%'],
              clockwise: false,
              labelLine: {
                normal: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderColor: '#FFF',
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                normal: {
                  show:true
                }
              }
            }
          ]
        };
        const chart2Echart = echarts.init(this.$refs.chart2)
        if (chart2 && chart2.chart) {
          const option2 = JSON.parse(JSON.stringify(option))
          option2.series[0].label.normal.formatter = function (value) {
            return Math.abs(value.value)
          }
          this.chart2Chart = chart2.chart.map((v,i) => {
            v.itemStyle = {
              normal: {

              }
            }
            v.itemStyle.normal.color = {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: this.color[i].start // 0% 处的颜色
              }, {
                offset: 1, color: this.color[i].end // 100% 处的颜色
              }],
              globalCoord: false
            }
            return v
          })
          option2.series[0].data = this.chart2Chart
          // option2.series[0].itemStyle.normal.borderColor = '#55b437'
          // option2.series[0].lineStyle.normal.color = '#55b437'
          // option2.series[0].areaStyle.normal.color.colorStops[0].color = 'rgba(85,180,55, 0.3)'
          // option2.series[0].areaStyle.normal.color.colorStops[1].color = 'rgba(85,180,55, 0)'
          chart2Echart.setOption(option2)
        }
      }
    },
    computed:{
      textData () {
        if(!this.chartData.textData) return
        return this.chartData.textData
      },
      basic () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart1) return []
        if(!this.chartData.chartData.chart1.basic) return []
        return this.chartData.chartData.chart1.basic
      },
      textData1 () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart1) return []
        if(!this.chartData.chartData.chart1.textData) return []
        return this.chartData.chartData.chart1.textData
      },
      textData2 () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart2) return []
        if(!this.chartData.chartData.chart2.textData) return []
        return this.chartData.chartData.chart2.textData
      }
    },
    mounted(){
      this.ageLimitChart()
    },
    components: {
      PageFooter,
      pageHead,
      contentHead
    }
  }
</script>
<style lang="scss">
  .common-size.horizontal {
    &.info_basic {
      .content-container {
        padding: 0 10px;
        height: 452px;
        .horizontal-distribute-container {
          text-indent: 0em;
        }
        .page-chart {
          position: relative;
          .pie-dist {
            position: absolute;
            bottom: 4px;
            left: 50px;
            right: 50px;
            font-size: 12px;
            .pie-dist-item {
              margin-left: 30px;
            }
            .display-middle {
              display: inline-block;
              vertical-align: middle;
            }
            .pie-dist-radius {
              width: 10px;
              height: 10px;
              border-radius: 10px;
              background: #000;
              margin: 0 3px 0 0;
              &.radius-0 {
                background: linear-gradient(90deg,#9d9dcd,#5058a5);
              }
              &.radius-1 {
                background: linear-gradient(90deg,#8fb6e1,#356fb7);
              }
              &.radius-2 {
                background: linear-gradient(90deg,#add593,#5eb63e);
              }
              &.radius-3 {
                background: linear-gradient(90deg,#d2e178,#cdda41);
              }
              &.radius-4 {
                background: linear-gradient(90deg,#f4b96e,#f19b5b);
              }
              &.radius-5 {
                background: linear-gradient(90deg,#f4b96e,#f19b5b);
              }
            }
          }
          .chart-box {
            width: 100%;
            height: 100%;
            &.basic-box {
              padding:0px 29px 0 29px;
            }
            .basic-item {
              width: 48%;
              border: solid 2px #f4f4f5;
              margin-top: 23px;
              padding: 16px 20px;
              line-height: normal;
              .num_unit {
                color: #323333;
                font-weight: bold;
                font-size: 20px;
                text-align: right;
              }
              .name {
                color: #999;
                font-size: 12px;
                text-align: right;
              }
              .basic-icon {
                float: left;
                width: 45px;
                height: 45px;
                border-radius: 100%;
                &.icon-1{
                  background: url("../../assets/images/base_1.png") no-repeat center center;
                  background-size: 100% 100%;
                }
                &.icon-2{
                  background: url("../../assets/images/base_2.png") no-repeat center center;
                  background-size: 100% 100%;
                }
                &.icon-3{
                  background: url("../../assets/images/base_3.png") no-repeat center center;
                  background-size: 100% 100%;
                }
                &.icon-4{
                  background: url("../../assets/images/base_4.png") no-repeat center center;
                  background-size: 100% 100%;
                }
                &.icon-5{
                  background: url("../../assets/images/base_5.png") no-repeat center center;
                  background-size: 100% 100%;
                }
                &.icon-6{
                  background: url("../../assets/images/base_6.png") no-repeat center center;
                  background-size: 100% 100%;
                }
              }
              &.left {
                float: left;
              }
              &.right {
                float: right;
              }
            }
          }
          .y-name {
            position: absolute;
            top: 5px;
            right: 4%;
            font-size: 12px;
            color: #989898;
          }
        }
      }
    }
  }
</style>
